<template>
	<view>
		<component :is="active" v-model:refresh="refresh" v-model:onMore="onMore" @count="handleCount" />
		<g-tab-bar :tabs="tabs" v-model:active="pageIndex" gaussian occupy @change="chnageTab" />
		<g-upgrade v-model:value="upgradeShow" :info="upgradeInfo" />
	</view>
</template>

<script setup>
	import {
		shallowRef,
		markRaw,
		ref,
		onBeforeUnmount
	} from "vue";
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getMsgUnRead
	} from "@/request/message";

	import Home from "@/pages/Home/index.vue";
	// import Untreated from "@/pages/Home/cp/Untreated.vue";
	import Untreated from "@/pages/Home/cp/UntreatedMyExam.vue";
	import Message from "@/pages/Message/index.vue";
	import User from "@/pages/user/index.vue";

	import homeIcon from "@/static/home/icon_home.png";
	import untreatedIcon from "@/static/home/icon_untreated.png";
	import messageIcon from "@/static/home/icon_message.png";
	import userIcon from "@/static/home/icon_user.png";
	import homeIconActive from "@/static/home/icon_home_active.png";
	import untreatedIconActive from "@/static/home/icon_untreated_active.png";
	import messageIconActive from "@/static/home/icon_message_active.png";
	import userIconActive from "@/static/home/icon_user_active.png";

	const active = shallowRef(markRaw(Home)); // 选中的tab
	const pageIndex = ref(0); // 当前菜单
	const tabs = ref([{
			label: "首页",
			icon: homeIcon,
			activeIcon: homeIconActive,
			path: markRaw(Home),
			num: 0,
		},
		{
			label: "我的审批",
			icon: untreatedIcon,
			activeIcon: untreatedIconActive,
			path: markRaw(Untreated),
			num: 0,
		},
		{
			label: "消息",
			icon: messageIcon,
			activeIcon: messageIconActive,
			path: markRaw(Message),
			num: 0,
		},
		{
			label: "我的",
			icon: userIcon,
			activeIcon: userIconActive,
			path: markRaw(User),
			num: 0,
		},
	]); // 菜单列表
	const query = ref(""); // 页面路由参数
	const refresh = ref(false); // 刷新
	const onMore = ref(false); // 上拉加载
	const upgradeShow = ref(false); // 升级弹窗
	const upgradeInfo = ref({}); // 升级信息

	onLoad((e) => {
		if ("tab" in e) {
			active.value = tabs.value[e.tab].path;
			pageIndex.value = e.tab;
			query.value = new URLSearchParams(e).toString();
		}
		getMessageCount();
		uni.$on("upgrade", (v) => {
			if (v) {
				upgradeInfo.value = v;
				upgradeShow.value = true;
			}
		});
		uni.$on("untreated", (v) => {
			tabs.value[1].num = v;
		});
	});

	onPullDownRefresh(() => {
		refresh.value = true;
	});

	onReachBottom(() => {
		onMore.value = true;
	});

	onBeforeUnmount(() => {
		uni.$off("upgrade");
		uni.$off("untreated");
	});

	// 切换组件
	const chnageTab = (val) => {
		uni.stopPullDownRefresh();
		active.value = val.path;
		refresh.value = false;
		if (query.value) {
			uni.redirectTo({
				url: "/pages/index/index?tab=" + val.index
			});
		}
	};

	// 统计数量
	const handleCount = (val) => {
		const index = tabs.value.findIndex((i) => i.label == val.label || i.label == val.name);
		if (index != -1) {
			tabs.value[index].num = val.count;
		}
	};

	// 获取消息数量
	const getMessageCount = () => {
		getMsgUnRead().then((res) => {
			if (res.code == 200) {
				const {
					reminderCount,
					systemNoticeCount
				} = res.data;
				tabs.value[2].num = reminderCount + systemNoticeCount;
			}
		});
	};
</script>

<style lang="scss" scoped></style>